<template>
  <div id="bpmn-app">
    <bpmn-toolbar v-if="getEditorConfig.toolbar" />
    <div class="main-content">
      <bpmn-designer :xml.sync="xmlString" />
      <bpmn-panel v-if="getEditorConfig.penalMode === 'custom'" />
      <div v-else class="camunda-panel" id="camunda-panel"></div>
    </div>

    <!-- <bpmn-settings /> -->
    <bpmn-context-menu />
  </div>
</template>

<script>
import BpmnDesigner from "./components/Designer";
import BpmnSettings from "./components/Settings";
import { mapGetters } from "vuex";
import BpmnToolbar from "./components/Toolbar";
import BpmnContextMenu from "@packages/components/ContextMenu/ContextMenu";
import BpmnPanel from "./components/Panel";
export default {
  name: "BpmnComp",
  components: { BpmnPanel, BpmnDesigner, BpmnToolbar, BpmnSettings, BpmnContextMenu, BpmnPanel },
  data() {
    return {
      xmlString: undefined
    };
  },
  computed: {
    ...mapGetters(["getEditorConfig"])
  },
  mounted() {
    document.body.addEventListener("contextmenu", function (ev) {
      ev.preventDefault();
    });
  }
};
</script>
